@import './com';

header {
    width: vw(750);
    height: vw(350);
    .head_top {
        width: vw(750);
        height: vw(76);
        margin-top: vw(49);
        display: flex;
        justify-content: space-between;
        a {
            margin-left: vw(23);
            width: vw(127);
            height: vw(57);
            border: vw(1) solid $col;
            border-radius: vw(30);
            text-align: center;
            line-height: vw(57);
            font-size: vw(26);
        }
        span {
            margin-top: vw(17);
            font-size: vw(26);
        }
        .sel {
            margin-right: vw(24);
            position: relative;
            select {
                width: vw(160);
                height: vw(57);
                border: vw(1) solid $col;
                outline: none;
                -webkit-appearance: none;
                font-size: vw(26);
                background-color: #fff;
            }
            &::after {
                content: '';
                position: absolute;
                margin-top: vw(-18);
                top: 50%;
                right: vw(16);
                width: 0;
                height: 0;
                border-top: vw(20) solid $col;
                border-right: vw(20) solid transparent;
                border-bottom: vw(20) solid transparent;
                border-left: vw(20)  solid transparent;
                pointer-events: none;
            }
        }
    }

    .inp {
        position: relative;
        margin: 0 auto;
        height: vw(55);
        width: vw(278);
        border: vw(2) solid $col;
        border-radius: vw(50);
        &::after {
            content: '';
            position: absolute;
            right: vw(16);
            top: vw(8);
            width: vw(36);
            height: vw(34);
            background: url(../image/index/fangdajing.png) no-repeat top/cover;
        }
        input {
            margin-top: vw(10);
                margin-left: vw(27);
                line-height: vw(34);
                width: vw(183);
                height: vw(34);
                font-size: vw(24);
                border: none;
                outline: none;
            
        }
    }

    .tb {
        position: relative;
        width: vw(522);
        height: vw(181);
        left: 50%;
        margin-left: vw(-261);
        margin-top: vw(20);
        table {
            tr {
                th {
                    height: vw(49);
                    font-size: vw(26);
                }
                td {
                    text-align: center;
                    
                    width: vw(127);
                    height: vw(65);
                    font-size: vw(20);
                    background-color: #dcdcdc;
                    a {
                        color: #959595;
                    }
                }
            }
        }
    }
}

main {
    .content1 {
        width: vw(750);
        height: vw(469);
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .content_box1 {
            display: flex;
            justify-content: space-between;
            div:first-of-type {
                img{
                    width: vw(32);
                    height: vw(47);
                    margin-left: vw(24);
                    vertical-align: bottom;
                }
                span {
                    font-size: vw(30);
                }
            }

            div:nth-of-type(2) {
                margin-top: vw(10);
                img{
                    width: vw(27);
                    height: vw(27);
                    margin-right: vw(24);
                    vertical-align: bottom;
                }
            }
        }
        .content_box2 {
            width: vw(750);
            height: vw(351);
            display: flex;
            justify-content: space-around;
            .cb_box1 {
                width: vw(280);
                height: vw(354);
                margin-left: vw(12);
                img {
                    
                    width: vw(280);
                    height: vw(354);
                }
            }
            .cb_box2 {
                width: vw(422);
                height: vw(353);
                margin-right: vw(12);
                img:first-of-type {
                    width: vw(422);
                    height: vw(146);
                }
                img:nth-of-type(2)
                 {
                    width: vw(200);
                    height: vw(200);
                }
                img:nth-of-type(3) {
                    float:right;
                    width: vw(214);
                    height: vw(200);
                }
            }
        }
    }

    .content2 {
        width: vw(750);
        height: vw(312);
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .content_box1 {
            display: flex;
            justify-content: space-between;
            div:first-of-type {
                img{
                    width: vw(41);
                    height: vw(40);
                    margin-left: vw(24);
                    vertical-align: bottom;
                }
                span {
                    font-size: vw(30);
                }
            }

            div:nth-of-type(2) {
                margin-top: vw(10);
                img{
                    width: vw(27);
                    height: vw(27);
                    margin-right: vw(24);
                    vertical-align: bottom;
                }
            }
        }
        .content_box2 {
            display: flex;
            justify-content: space-around;
            img {
                width: vw(215);
                height: vw(202);
            }
        }
    }

}


nav {
    position: sticky;
    bottom: 0;
    .bt_box{
        display: flex;
        justify-content: space-around;
        width: vw(750);
        height: vw(110);
        background-color: #fff;
        div {
            display: inline-block;
            width: vw(73);
            text-align: center;
            a {
                img {
                    width: vw(73);
                    height: vw(73);
                }
            }
        }
    }
}